<script setup>
import {BaseEdge, EdgeLabelRenderer, getSmoothStepPath, getSimpleBezierPath, getStraightPath, useVueFlow} from '@vue-flow/core'
import {computed, defineEmits} from 'vue'
import {Plus} from "@element-plus/icons-vue";
import {ElMessage} from "element-plus";

const props = defineProps({
  sourceX: {
    type: Number,
    required: true,
  },
  sourceY: {
    type: Number,
    required: true,
  },
  targetX: {
    type: Number,
    required: true,
  },
  targetY: {
    type: Number,
    required: true,
  },
  sourcePosition: {
    type: String,
    required: true,
  },
  targetPosition: {
    type: String,
    required: true,
  },
  data: {
    type: Object,
    required: true,
  },
  source: {
    type: String,
    required: true,
  },
  target: {
    type: String,
    required: true,
  },
  id: {
    type: String,
    required: true,
  }
})

const path = computed(() => getSmoothStepPath(props))

const emits = defineEmits(['addNode'])
const {removeEdges} = useVueFlow()

const dialogVisible = ref(false)
const newNodeType = ref('')
const handleClose = () => {
  dialogVisible.value = false
}

const addNode = () => {
  if (newNodeType.value === '') {
    ElMessage({
      message: '请选择节点类型',
      type: 'warning'
    })
  } else if (newNodeType.value === '条件分支') {
    // removeEdges(props.id)
    emits('addNode', {
      direction: 'bottom',
      source: props.source,
      target: '',
      nodeType: newNodeType.value,
    })
    newNodeType.value = ''
    handleClose()
  } else {
    removeEdges(props.id)
    emits('addNode', {
      direction: 'bottom',
      source: props.source,
      target: props.target,
      nodeType: newNodeType.value,
    })
    newNodeType.value = ''
    handleClose()
  }
}
</script>

<script>
export default {
  inheritAttrs: false,
}
</script>

<template>
  <!-- You can use the `BaseEdge` component to create your own custom edge more easily -->
  <BaseEdge :path="path[0]"/>

  <!-- Use the `EdgeLabelRenderer` to escape the SVG world of edges and render your own custom label in a `<div>` ctx -->
  <EdgeLabelRenderer>
    <div
        :style="{
        pointerEvents: 'all',
        position: 'absolute',
        transform: `translate(-50%, -50%) translate(${path[1]}px,${path[2]}px)`,
      }"
        class="nodrag nopan"
    >
      <el-button circle plain @click="dialogVisible = true">
        <el-icon color="#409EFF">
          <Plus/>
        </el-icon>
      </el-button>
      <el-dialog
          v-model="dialogVisible"
          :before-close="handleClose"
          append-to-body
          title="请选择"
          width="500"
      >
        <el-radio-group v-model="newNodeType">
          <el-radio label="审批" value="审批">审批</el-radio>
          <el-radio label="抄送" value="抄送">抄送</el-radio>
          <el-radio label="办理" value="办理">办理</el-radio>
          <el-radio label="条件分支" value="条件分支">条件分支</el-radio>
        </el-radio-group>
        <template #footer>
          <div class="dialog-footer">
            <el-button @click="dialogVisible = false">取消</el-button>
            <el-button type="primary" @click="addNode">
              确定
            </el-button>
          </div>
        </template>
      </el-dialog>
    </div>
  </EdgeLabelRenderer>

</template>